<template>
  <div class="eagle-checkbox-group">
    <template v-if="label">
      <van-field
        :name="name"
        :label="label"
        :required="required"
        :rules="rules"
        :label-width="labelWidth"
      >
        <template #input>
          <van-checkbox-group
            :value="value"
            @input="(val)=>handleChecked(val)"
            @change="change"
            ref="vanCheckBoxGroup"
            :direction="direction"
            :disabled="readonly"
            v-if="dataSource.length>0"
          >
            <eagle-checkbox
              :name="item[option.value]"
              v-model="item[option.value]"
              :label="item[option.label]"
              v-for="(item, index) in dataSource"
              :key="index"
            ></eagle-checkbox>
            <slot></slot>
            <!-- <van-checkbox :name="item.ID" :shape="shape" v-for="(item, index) in dataSource" :key="index">{{ item.Name }}</van-checkbox> -->
          </van-checkbox-group>
        </template>
      </van-field>
    </template>
    <template v-if="!label">
      <van-checkbox-group
        :value="value"
        @input="(val)=>handleChecked(val)"
        @change="change"
        :direction="direction"
        :disabled="readonly"
        ref="vanCheckBoxGroup"
      >
        <eagle-checkbox
          :name="item[option.value]"
          v-model="item[option.value]"
          :label="item[option.label]"
          v-for="(item, index) in dataSource"
          :key="index"
        ></eagle-checkbox>
        <slot></slot>
      </van-checkbox-group>
    </template>
  </div>
</template>
<script>
import eagleCheckbox from "./eagle-checkbox.vue";
export default {
  components: { eagleCheckbox },
  name: "eagle-checkgroup",
  props: {
    label: {
      type: String,
      default() {
        return "";
      },
    },
    // value: {
    //   type: String | Number,
    //   default() {
    //     return null;
    //   },
    // },
    id: {
      type: String,
      default() {
        return "id";
      },
    },
    name: {
      type: String,
      default() {
        return "";
      },
    },
    span: {
      type: Number,
      default() {
        return 24;
      },
    },
    prop: {
      type: String,
      default() {
        return "";
      },
    },
    disabledValues: {
      type: String,
      default() {
        return "";
      },
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      },
    },
    labelWidth: {
      type: String,
      default() {
        return "100px";
      },
    },
    dataSource: {
      type: Array,
      default() {
        return [];
      },
    },
    required: {
      type: [Boolean],
      default() {
        return false;
      },
    },
    direction: {
      type: String,
      default() {
        return "";
      },
    },
    shape: {
      type: String,
      default() {
        return "";
      },
    },
    option: {
      type: Object,
      default: function () {
        return { label: "Name", value: "ID" };
      },
    },
    rules: {
      type: Array,
      default() {
        return [];
      },
    },
    value: {
      type: Array,
      default: () => [],
    },
    readonly: {
      type: Boolean,
      default: () => false,
    },
  },
  watch: {
    // value(newvalue, oldvalue) {
    //   if (newvalue !== oldvalue) {
    //     if (!this.value) {
    //       this.checkList = [];
    //     } else if (this.isfirst) {
    //       this.checkList = this.value.split(",");
    //     }
    //   }
    // },
  },
  data() {
    return {
      checkValue: "",
      items: [],
      rulesArray: [],
      checkList: [],
      isfirst: true,
      val: "",
    };
  },
  methods: {
    handleChecked(val) {
      
      if (val.length > 0) {
        this.checkList = val;
        this.$emit("input", this.checkList);
      } else {
        this.$emit("input", []);
      }
    },
    change(checkVal) {
      
      this.$emit("change", checkVal);
    },
    toggleAll(flag) {
      
      if (flag != "undefined") {
        this.$refs.vanCheckBoxGroup.toggleAll(flag);
      } else {
        this.$refs.vanCheckBoxGroup.toggleAll();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.eagle-checkbox-group {
  position: relative;
}

.eagle-checkbox-group::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0.42667rem;
  bottom: 0;
  left: 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>

